<template>
    <div class="box">
        <h2>props</h2>
        <div>count: {{ count }}</div>
        <Child
            :count="count"
            :obj="obj"
            :changeCountHandler="changeCountHandler"
            :changeObjHandler="changeObjHandler"
        ></Child>
    </div>
</template>

<script>
// props 父子组件之间的通信
// 传参有几种写法:
// 父组件:
//      父组件都是给组件标签使用 v-bind 绑定属性,在等号之后写数据即可
// 子组件:
//      子组件接收数据,有三种写法
//      1. 数组
//          props: ['count']
//      2. 对象写法
//          props: {
//              count: Number
//          }
//      3. 配置对象
//          props: {
//              count: {
//                  type: Number,
//                  default: 5, // 设置不传参的默认值
//                  required: true // 是否必传
//                  // 注意: default 和 required 是互斥的
//              }
//          }
// -------------------------
// 问题:props可以传什么参数?
//      可以传基本数据类型,传引用数据类型
// 问题:传给子组件的数据,这个数据原本就是父组件的,父组件修改这个数据无可厚非
// 但是子组件修改父组件传过来的数据,是否可修改?
//      父组件传给子组件的数据是不能修改的,但是可以修改对象的属性(数组的元素),但是不推荐
//      因为违反了单向数据流的规则
//      单向数据流:单行向下的数据流向
// 问题:那子组件就不能修改父组件这个数据了吗?
//      可以,让父组件传递函数给子组件,让子组件调用即可
// 问题:父组件给子组件传递的方法是 methods 中配置的,在data中配置行不行?
//      在data中配置函数数据进行传递的时候,如果写成ES5的函数形式,函数中this指向有问题
//      必须写成 箭头函数,this问题才能解决
//      方法放methods中还有一个原因:  data中的数据是可变的,methods配置的方法是不可变的
// 总结:
//      props父子组件之间的通信
//          父给子传非函数数据类型,目的是为了让子组件展示
//          父给子传函数数据类型,目的是为了让子组件调用这个函数修改父组件的数据
import Child from './Child.vue'
export default {
    name: "PropsTest",
    components: { Child },
    data() {
        return {
            count: 3,
            obj: {
                name: '旺财'
            },
            // changeCountHandler() {
            //     this.count++
            // },
            // changeObjHandler() {
            //     this.obj = { name: '小黑' }
            // },
            changeCountHandler: () => {
                this.count++
            },
            changeObjHandler: () => {
                this.obj = { name: '小黑' }
            },
        }
    },
    methods: {
        // changeCountHandler() {
        //     this.count++
        // },
        // changeObjHandler() {
        //     this.obj = { name: '小黑' }
        // },
    }
}
</script>

<style scoped>

</style>